class Compile {
    constructor(vm){
        this.el = vm.$el
        this.vm = vm
        this.compile(this.el)
    }

    compile(el){
        [...el.childNodes].forEach(node =>{
            // console.dir(node);
            if(this.isTextNode(node)){
                this.compileText(node)
            }
            if(this.isElementNode(node)){
                this.compileElement(node)

                if(node.childNodes.length){
                    this.compile(node)
                }
            }
        })
    }

    compileElement(node){
        [...node.attributes].forEach(attrName =>{
            // console.dir(attrName.name);
            if(this.isDirective(attrName.name)){
                let vattr = attrName.name.substr(2)
                // console.log('create'+vattr);
                if(/:/.test(vattr)){
                    let [_vattr, eventName] = vattr.split(':')
                    // console.log(_vattr, eventName);
                    return this['create'+_vattr](eventName,node,attrName.value)
                }
                this['create'+vattr](node,attrName.value)
            }
        })
    }

    compileText(node){
        let reg = /\{\{(.+?)\}\}/
        
        if(reg.test(node.data)){
            let key = RegExp.$1.trim()
            node.data = node.data.replace(reg, this.getObjData(this.vm.$data,key))

            // 创建事件，当数据改变更新视图
            new Watcher(this.vm,key,newVal=>{
                node.data = newVal
            })
        }
    }

    getObjData(data,key){
        if(/\./.test(key)){
            return eval('data.'+key)
        }else {
            return data[key]
        }
    }
    setObjData(data,key,val){
        if(/\./.test(key)){
            eval('data.'+key + ' = ' + JSON.stringify(val))
        }else {
            data[key] = val
        }
    }


    isDirective(attrName){
        return /^v-/.test(attrName)
    }

    isTextNode(node){
        return node.nodeType === 3
    }

    isElementNode(node){
        return node.nodeType === 1
    }

    createtext(node,attrVal){
        node.innerText = this.getObjData(this.vm.$data,attrVal)
        // 创建事件，当数据改变更新视图
        new Watcher(this.vm,attrVal,newVal=>{
            node.innerText = newVal
        })
    }

    createhtml(node,attrVal){
        node.innerHTML = this.getObjData(this.vm.$data,attrVal)
        // 创建事件，当数据改变更新视图
        new Watcher(this.vm,attrVal,newVal=>{
            node.innerHTML = newVal
        })
    }

    createmodel(node,attrVal){
        node.value = this.getObjData(this.vm.$data,attrVal)
        // 创建事件，当数据改变更新视图
        new Watcher(this.vm,attrVal,newVal=>{
            node.value = newVal
        })

        // 注册dom事件
        node.addEventListener('input',e=>{
            this.setObjData(this.vm.$data,attrVal, e.target.value)
        })
    }

    createon(eventName, node, cbName){
        console.log(this.vm);
        let callback = this.vm[cbName]
        node.addEventListener(eventName,callback.bind(this.vm))
    }


}